<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Mosaddek">
    <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
    <link rel="shortcut icon" href="img/favicon.png">

    <title>FlatLab Frontend | Buttons</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/theme.css" rel="stylesheet">
    <link href="css/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/flexslider.css"/>
    <link href="assets/bxslider/jquery.bxslider.css" rel="stylesheet" />


      <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
     <!--header start-->
    <header class="header-frontend">
        <div class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">Flat<span>Lab</span></a>
                </div>
                <div class="navbar-collapse collapse ">
                    <ul class="nav navbar-nav">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="services.html">Service</a></li>
                        <li class="dropdown active">
                            <a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">Feature <b class=" icon-angle-down"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="typography.html">Typography</a></li>
                                <li class="active"><a href="button.html">Buttons</a></li>
                            </ul>
                        </li>
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li ><a href="price.html">Price</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="contact.html">Contact</a></li>
                        <li><input type="text" placeholder=" Search" class="form-control search"></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <!--header end-->

    <!--breadcrumbs start-->
    <div class="breadcrumbs">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-sm-4">
                    <h1>Buttons</h1>
                </div>
                <div class="col-lg-8 col-sm-8">
                    <ol class="breadcrumb pull-right">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Pages</a></li>
                        <li class="active">Buttons</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!--breadcrumbs end-->

    <!--container start-->
    <div class="container">
        <div class="row">
            <!--Buttons start-->
            <div class="col-lg-6 col-sm-6">
                <h3 class="skills">Default Buttons</h3>
                <div class="btn-row">
                    <button class="btn btn-default" type="button">Default</button>
                    <button class="btn btn-primary" type="button">Primary</button>
                    <button class="btn btn-success" type="button">Success</button>
                    <button class="btn btn-info" type="button">Info</button>
                    <button class="btn btn-warning" type="button">Warning</button>
                    <button class="btn btn-danger" type="button">Danger</button>
                </div>
                <h3 class="skills">Rounded Buttons</h3>
                <div class="btn-row">
                    <button class="btn btn-round btn-default" type="button">Default</button>
                    <button class="btn btn-round btn-primary" type="button">Primary</button>
                    <button class="btn btn-round btn-success" type="button">Success</button>
                    <button class="btn btn-round btn-info" type="button">Info</button>
                    <button class="btn btn-round btn-warning" type="button">Warning</button>
                    <button class="btn btn-round btn-danger" type="button">Danger</button>
                </div>
                <h3 class="skills">Dropdowns Button</h3>
                <div class="btn-row">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown">Primary <span class="caret"></span></button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                    <div class="btn-group">
                        <button type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown">Success <span class="caret"></span></button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                </div>
                <h3 class="skills"> Split Dropdowns Button </h3>
                <div class="btn-row">
                    <div class="btn-group">
                        <button type="button" class="btn btn-white">Default</button>
                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                    <div class="btn-group dropup">
                        <button type="button" class="btn btn-white">Dropup</button>
                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                </div>

                <h3 class="skills"> Group Button </h3>
                <div class="btn-row">
                    <div class="btn-row">
                        <div class="btn-group">
                            <button type="button" class="btn btn-white">Left</button>
                            <button type="button" class="btn btn-white">Middle</button>
                            <button type="button" class="btn btn-white">Right</button>
                        </div>
                        <div class="btn-group  btn-group-sm">
                            <button type="button" class="btn btn-white">Left</button>
                            <button type="button" class="btn btn-white">Middle</button>
                            <button type="button" class="btn btn-white">Right</button>
                        </div>
                    </div>
                    <p class="text-muted">Vertical button groups</p>
                    <div class="btn-row">
                        <div class="btn-group-vertical">
                            <button type="button" class="btn btn-white">Top</button>
                            <button type="button" class="btn btn-white">Middle</button>
                            <button type="button" class="btn btn-white">Bottom</button>
                        </div>
                    </div>
                    <p class="text-muted">Nested button groups</p>
                    <div class="btn-row">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default">1</button>
                            <button type="button" class="btn btn-danger">2</button>
                            <button type="button" class="btn btn-default">3</button>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Dropdown link 1</a></li>
                                    <li><a href="#">Dropdown link 2</a></li>
                                    <li><a href="#">Dropdown link 3</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <p class="text-muted">Multiple button groups</p>
                    <div class="btn-row">
                        <div class="btn-toolbar">
                            <div class="btn-group">
                                <button type="button" class="btn btn-info">1</button>
                                <button type="button" class="btn btn-info active">2</button>
                                <button type="button" class="btn btn-info">3</button>
                                <button type="button" class="btn btn-info">4</button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-success">5</button>
                                <button type="button" class="btn btn-success">6</button>
                                <button type="button" class="btn btn-success">7</button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-warning">8</button>
                            </div>
                        </div>
                    </div>

                    <p class="text-muted">Group Checkbox</p>
                    <div class="btn-row">
                        <div data-toggle="buttons" class="btn-group">
                            <label class="btn btn-primary">
                                <input type="checkbox"> Option 1
                            </label>
                            <label class="btn btn-primary">
                                <input type="checkbox"> Option 2
                            </label>
                            <label class="btn btn-primary">
                                <input type="checkbox"> Option 3
                            </label>
                        </div>
                    </div>

                    <p class="text-muted">Group Radio</p>
                    <div class="btn-row">
                        <div data-toggle="buttons" class="btn-group">
                            <label class="btn btn-default">
                                <input type="radio" id="option1" name="options"> Option 1
                            </label>
                            <label class="btn btn-default">
                                <input type="radio" id="option2" name="options"> Option 2
                            </label>
                            <label class="btn btn-default">
                                <input type="radio" id="option3" name="options"> Option 3
                            </label>
                        </div>
                    </div>
                </div>

            </div>
           <div class="col-lg-6 col-sm-6">
               <h3 class="skills"> Drop Shadow Buttons </h3>
               <div class="btn-row">
                   <button class="btn btn-shadow btn-default" type="button">Default</button>
                   <button class="btn btn-shadow btn-primary" type="button">Primary</button>
                   <button class="btn btn-shadow btn-success" type="button">Success</button>
                   <button class="btn btn-shadow btn-info" type="button">Info</button>
                   <button class="btn btn-shadow btn-warning" type="button">Warning</button>
                   <button class="btn btn-shadow btn-danger" type="button">Danger</button>
               </div>
               <h3 class="skills">  Buttons Size  </h3>
               <div class="btn-row">
                   <button class="btn btn-default btn-lg" type="button">Large Button</button>
                   <button class="btn btn-primary" type="button">Default Button</button>
                   <button class="btn btn-success btn-sm" type="button">Small Button</button>
                   <button class="btn btn-info btn-xs" type="button">Extra Small Button</button>
               </div>
               <h3 class="skills">  Buttons with Icon  </h3>
               <div class="btn-row">
                   <button class="btn btn-primary" type="button"><i class="icon-cloud"></i> Cloud</button>
                   <button class="btn btn-success" type="button"><i class="icon-eye-open"></i> View </button>
                   <button class="btn btn-info " type="button"><i class="icon-refresh"></i> Update</button>
                   <button class="btn btn-default " type="button"><i class="icon-cloud-upload"></i> Upload</button>
                   <button class="btn btn-white" data-toggle="button">
                       <i class="icon-thumbs-up text-info"></i>
                       55
                   </button>
                   <button class="btn btn-white" data-toggle="button">
                       <i class="icon-home"></i>
                   </button>
               </div>

               <h3 class="skills">   Justified Button groups   </h3>
               <div class="btn-row">
                   <div class="btn-group btn-group-justified">
                       <a href="#" class="btn btn-success">Left</a>
                       <a href="#" class="btn btn-info">Middle</a>
                       <a href="#" class="btn btn-danger">Right</a>
                   </div>
               </div>

               <h3 class="skills">    Block level button    </h3>
               <div class="btn-row">
                   <button class="btn btn-success btn-lg btn-block" type="button">Block level button</button>
                   <button class="btn btn-warning btn-block" type="button">Block level button</button>
                   <button class="btn btn-danger btn-xs btn-block" type="button">Block level button</button>
               </div>

               <h3 class="skills">    Social Icons   </h3>
               <ul class="social-link-footer list-unstyled">
                   <li><a href="#"><i class="icon-facebook"></i></a></li>
                   <li><a href="#"><i class="icon-google-plus"></i></a></li>
                   <li><a href="#"><i class="icon-dribbble"></i></a></li>
                   <li><a href="#"><i class="icon-linkedin"></i></a></li>
                   <li><a href="#"><i class="icon-twitter"></i></a></li>
                   <li><a href="#"><i class="icon-skype"></i></a></li>
                   <li><a href="#"><i class="icon-github"></i></a></li>
                   <li><a href="#"><i class="icon-youtube"></i></a></li>

                   <li><a href="#"><i class="icon-html5"></i></a></li>
                   <li><a href="#"><i class="icon-flickr"></i></a></li>
                   <li><a href="#"><i class="icon-dropbox"></i></a></li>
                   <li><a href="#"><i class="icon-android"></i></a></li>
                   <li><a href="#"><i class="icon-gittip"></i></a></li>
                   <li><a href="#"><i class="icon-apple"></i></a></li>
                   <li><a href="#"><i class="icon-trello"></i></a></li>
                   <li><a href="#"><i class="icon-weibo"></i></a></li>

                   <li><a href="#"><i class="icon-adn"></i></a></li>
                   <li><a href="#"><i class="icon-bitbucket-sign"></i></a></li>
                   <li><a href="#"><i class="icon-github-sign"></i></a></li>
                   <li><a href="#"><i class="icon-renren"></i></a></li>
                   <li><a href="#"><i class="icon-vk"></i></a></li>
                   <li><a href="#"><i class="icon-linux"></i></a></li>
                   <li><a href="#"><i class="icon-maxcdn"></i></a></li>
                   <li><a href="#"><i class="icon-instagram"></i></a></li>

               </ul>

           </div>
            <!--Buttons end-->
        </div>

    </div>
    <!--container end-->

     <!--footer start-->
     <footer class="footer">
         <div class="container">
             <div class="row">
                 <div class="col-lg-3 col-sm-3">
                     <h1>contact info</h1>
                     <address>
                         <p>Address: No.28-63877 street</p>
                         <p>lorem ipsum city, Country</p>

                         <p>Phone : (123) 456-7890</p>
                         <p>Fax : (123) 456-7890</p>
                         <p>Email : <a href="javascript:;">support@vectorlab.com</a></p>
                     </address>
                 </div>
                 <div class="col-lg-5 col-sm-5">
                     <h1>latest tweet</h1>
                     <div class="tweet-box">
                         <i class="icon-twitter"></i>
                         <em>Please follow <a href="javascript:;">@nettus</a> for all future updates of us! <a href="javascript:;">twitter.com/vectorlab</a></em>
                     </div>
                 </div>
                 <div class="col-lg-3 col-sm-3 col-lg-offset-1">
                     <h1>stay connected</h1>
                     <ul class="social-link-footer list-unstyled">
                         <li><a href="#"><i class="icon-facebook"></i></a></li>
                         <li><a href="#"><i class="icon-google-plus"></i></a></li>
                         <li><a href="#"><i class="icon-dribbble"></i></a></li>
                         <li><a href="#"><i class="icon-linkedin"></i></a></li>
                         <li><a href="#"><i class="icon-twitter"></i></a></li>
                         <li><a href="#"><i class="icon-skype"></i></a></li>
                         <li><a href="#"><i class="icon-github"></i></a></li>
                         <li><a href="#"><i class="icon-youtube"></i></a></li>
                     </ul>
                 </div>
             </div>
         </div>
     </footer>
     <!--footer end-->

  <!-- js placed at the end of the document so the pages load faster -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/hover-dropdown.js"></script>
    <script defer src="js/jquery.flexslider.js"></script>
    <script type="text/javascript" src="assets/bxslider/jquery.bxslider.js"></script>

    <script src="js/jquery.easing.min.js"></script>
    <script src="js/link-hover.js"></script>


     <!--common script for all pages-->
    <script src="js/common-scripts.js"></script>


  <script>

  </script>

  </body>
</html>
